<template>
	<scroll-view ref="tpf-scroll-bar" class="tpf-scroll-bar" :show-scrollbar="false" scroll-x scroll-with-animation :scroll-left="scrollLeft">
		<view class="tpf-scroll-bar-items">
			<slot></slot>
			<slot name="underline" v-if="showUnderLine">
				<view class="scroll-bar-underline" :style="{width:underlineWidth+'px',left:underlineOffsetLeft+'px'}"></view>
			</slot>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: 'TpfScrollBar',
		provide() {
			return {
				scrollTabBar: this
			}
		},
		props:{
			showUnderLine:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				underlineWidth:30,
				underlineOffsetLeft:0,
				scrollLeft: 0,
				itemIndex: 0,  						//子组件索引，将在子组件中引用
			}
		},
		mounted() {
			this.$nextTick(function(){
				uni.createSelectorQuery().in(this).select('.tpf-scroll-bar-items').fields({size: true},data=>{
					
					console.log(data);
					
				}).exec();
			});
		},
		methods: {
			
		},
	}
</script>

<style scoped>
.tpf-scroll-bar {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
}
.tpf-scroll-bar-items{
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	position: relative;
}
.scroll-bar-underline{
	position: absolute;
	bottom: 0rpx;
	border-bottom:3px #FF0000 solid;
}
</style>